<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
    <script src="./js/jquery-1.4.2.min.js"></script>
    <script src="./js/supportCode.js"></script>
    <script>
        /**
         * 按给定的分组点生成分组
         * @param points 所有点
         * @param zonePoints 当前分组点
         */
        function kMeans(points, zonePoints) {
            for (var i = 0; i < points.length; i++) {
                var p = points[i];
                var minDistance = -1, minTp = null;
                for (var j = 0; j < zonePoints.length; j++) {
                    var tp = zonePoints[j];
                    var distance = Math.sqrt(Math.pow(p.x - tp.x, 2) + Math.pow(p.y - tp.y, 2));
                    if (minDistance === -1 || minDistance > distance) {//计算每个点到各区域核心点的最短距离
                        minDistance = distance;
                        minTp = tp;
                    }
                }
                p.tpId = minTp.id;
                $("#p" + p.id).css('background-color', minTp.color);//设置点颜色
                printLog('p[' + p.id + ']{x:' + p.x + ',y:' + p.y + '}所属类别:' + (p.tpId === undefined ? '未设定' : p.tpId));
            }
        }

        /**
         * 计算每个分组的核心点，并修改分组点坐标
         * @param points 所有点
         * @param zonePoints 当前分组点
         */
        function calcCenter(points, zonePoints) {
            var bestRegionCoreSize = 0;
            for (var j = 0; j < zonePoints.length; j++) {
                var tp = zonePoints[j];
                //1，找到分组的所有点
                var pSumX = 0, pSumY = 0, pSize = 0;
                for (var i = 0; i < points.length; i++) {
                    var p = points[i];
                    if (tp.id === p.tpId) {
                        // tpGroup.push(p);
                        pSumX += p.x;
                        pSumY += p.y;
                        pSize++;
                    }
                }
                //2，求组核心点
                if (pSize > 0) {
                    var pCenterX = pSumX / pSize;
                    var pCenterY = pSumY / pSize;
                    if (tp.x === pCenterX && tp.y === pCenterY) {
                        bestRegionCoreSize++;
                        printLog('<font color="'+tp.color+'">找到一个最佳聚类核心，坐标是：{x：'+pCenterX+',y:'+pCenterY+'}</font>');
                    } else {
                        tp.x = pCenterX;
                        tp.y = pCenterY;
                        $("#tp" + tp.id).css({'left': pCenterX + 'px', 'top': pCenterY + 'px'});

                    }
                }
            }
            if (bestRegionCoreSize === zonePoints.length) {
                alert("已找到所有聚类的最佳核心点，所有点的聚类已完成");
                return true;
            } else {
                return false;
            }
        }
    </script>
    <link rel="stylesheet" href="./style.css">
</head>
<body>

<div id="step1" class="stepDiv">
    步骤1：请在左侧区域中点击生成待分类点,
    <input id="step1btn" type="button" value="点选完毕" disabled onclick="execStep(2)">
</div>
<div id="step2" class="stepDiv hide">
    步骤2：请在左侧区域中点击设定<input id='k' type="text" value="2" size="5">个聚类（先确定数值，再进行点击），
    <input id="step2btn" type="button" value="设定完毕" disabled onclick="execStep(3)">
</div>
<div id="step3" class="stepDiv hide">
    步骤3：点击<input id="step3btn" type="button" value="执行分类" onclick="execStep(4)">
    ，执行第<span class="kCount" style="color: red"></span>次聚集分类.
</div>
<div id="step4" class="stepDiv hide">
    步骤4：第<span class="kCount" style="color: red"></span>次分类生成<span class="showK" style="color: red"></span>个聚集分类。
    <input id="step4btn" type="button" value="点此计算分类的核心点" onclick="execStep(5)">
</div>
<div id="step5" class="stepDiv hide">
    恭喜，已找到所有分区的最佳核心点，所有点的聚类已完成，k-means运算结束。
</div><br/>
<div style="position: absolute;top: 40px;left: 10px;">
    <input type="button" value="重置" onclick="init()" >
    <input id='showTitle' type="checkbox" value="1" onclick="showTitle()" >是否显示文字
</div>
<br/>
<div id="canvas" class="divCanvas" onmousedown="addPoint(event)"></div>
<div id="cons" class="divConsole">日志：<br></div>
</body>
</html>